.x-tabs {
  &__nav {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 16px;
  }
  
  &__item {
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    
    &--active {
      color: $color-primary;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: $color-primary;
      }
    }
    
    &:hover {
      color: $color-sub;
    }
  }
}
